<template>
  <!-- <Modal v-model="showModal" class="preview-modal" width="100%"> -->
  <div class="temp" v-if="showModal">
    <Icon type="md-close" class="closeIcon" @click="closeTemp" size="50" color="#fff" />
    <div class="tempBtn">
      <Button @click="closeTemp">取消</Button>
      <Button type="primary" @click="chooseBg" style="margin-left: 10px">确定</Button>
    </div>
    <div class="swiperBox">
      <swiper
        ref="mySwiper"
        :options="swiperOption"
        @slideChangeTransitionEnd="slideChangeTransitionEnd(swiper)">
        <swiper-slide v-for="(item, index) in bgList" :key="index">
          <canvas1
            ref="canvas"
            :keyIndex="index"
            v-if="showModal && item.templateName == '1'"
            :tuUrl1="item.picUrl"
            :editorInfo="editorInfo"></canvas1>
          <canvas2
            ref="canvas"
            :keyIndex="index"
            v-if="showModal && item.templateName == '2'"
            :tuUrl1="item.picUrl"
            :editorInfo="editorInfo"></canvas2>
          <canvas3
            ref="canvas"
            :keyIndex="index"
            v-if="showModal && item.templateName == '3'"
            :tuUrl1="item.picUrl"
            :editorInfo="editorInfo"></canvas3>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev">
          <Icon type="ios-arrow-back" size="50" color="#fff" />
        </div>
        <div class="swiper-button-next" slot="button-next">
          <Icon type="ios-arrow-forward" size="50" color="#fff" />
        </div>
      </swiper>
    </div>
  </div>
  <!-- </Modal> -->
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import canvas1 from '@/components/template/canvas1.vue'
  import canvas2 from '@/components/template/canvas2.vue'
  import canvas3 from '@/components/template/canvas3.vue'
  import bgMapMgr from '@/biz/bgMap/bgMap'

  export default {
    props: ['editorInfo', 'bgId'],
    components: {
      swiper,
      swiperSlide,
      // temp1,
      // temp2,
      canvas1,
      canvas2,
      canvas3
    },

    data() {
      let vm = this
      return {
        canvasImgData: '',
        showModal: false,
        swiperOption: {
          initialSlide: 0,
          // initialSlide: 1,
          slidesPerView: 3,

          centeredSlides: true,
          // loop: true,
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true,
          // },

          // loop: true,
          // autoplay: {
          //   delay: 3000,
          //   stopOnLastSlide: false,
          //   disableOnInteraction: false
          // },
          observer: true,
          observeParents: true,
          // 设置点击箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on: {
            slideChange: function () {
              console.log(this, this.realIndex, '翻页拿到swiper实例')
              vm.realIndex = this.realIndex
            }
          }
        },
        realIndex: 0,
        bgList: [],

        bgIndex: ''
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {
      chooseBg() {
        console.log(this.realIndex, 'this.realindex')
        this.$refs['canvas'][this.realIndex].convertCanvasToImage()

        this.$emit('chooseBg', this.bgList[this.realIndex], this.editorInfo)
        this.closeTemp()
      },
      show() {
        this.showModal = true
        this.realIndex = 0
        console.log(this.swiper.realIndex, '刚进来this.swiper.realIndex')
      },
      closeTemp() {
        this.showModal = false
      },
      slideChangeTransitionEnd(val) {
        // console.log(val, this.realIndex, 'swiper滚动后的数据');
      },

      backgroundList() {
        let params = {}
        bgMapMgr.backgroundList(params).then((res) => {
          this.bgList = res
          console.log(res, this.bgId, 'bglist')
        })
      }
    },

    created() {
      this.backgroundList()
      console.log(this.editorInfo, this.realIndex, '刚进来时的当前填写的数据xdddddddddddddd1')
    },
    mounted() {},
    watch: {
      bgId(val) {
        this.bgId = val
        console.log(this.bgId, this.bgList, 'this.bgId监听')
        if (this.bgId) {
          this.bgIndex = this.bgList.findIndex((item) => {
            return item.id == this.bgId
          })
          console.log(this.bgIndex, 'bgIndexbgIndexbgIndexbgIndex')
          // this.swiperOption.initialSlide = this.bgIndex

          this.$nextTick(() => {
            this.$refs.mySwiper.swiper.slideTo(this.bgIndex, 1000, true)
          })
        }
      },
      showModal(val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.mySwiper.swiper.slideTo(this.bgIndex, 1000, true)
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .temp {
    height: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999999999;
    padding-bottom: 80px;

    .closeIcon {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      z-index: 9999;
    }

    .swiperBox {
      width: 70%;
      min-width: 1215px;
      margin: 18px auto 0;
      // padding: 18px 22% 0 18%;
      overflow: auto;
      max-height: 100%;

      // scrollbar-width: none;
      // /* firefox */
      // -ms-overflow-style: none;
      // /* IE 10+ */
      // overflow-x: hidden;
      // overflow-y: auto;
    }

    .swiperBox::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .temp1 {
      // height: 400px;
      // background: #fff;
    }
  }

  .swiper-slide {
    border-radius: 8px;

    // display: -webkit-box;
    // display: -ms-flexbox;
    // display: -webkit-flex;
    // display: flex;
    // -webkit-box-pack: center;
    // -ms-flex-pack: center;
    // -webkit-justify-content: center;
    // justify-content: center;
    // -webkit-box-align: center;
    // -ms-flex-align: center;
    // -webkit-align-items: center;
    // align-items: center;
    transition: 300ms;
    transform: scale(0.8);
  }

  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1);
  }

  .swiper-button-prev,
  .swiper-button-next {
    background: none;
  }

  .tempBtn {
    text-align: center;
    margin-top: 10px;
  }
</style>
